<template>
  <div class="listLeft">
   <div class="row" @click="clickActive(item.id)" :class="item.id === idActive ? 'active' : '' " v-for="item in listLeftArr" :key="item.id">{{item.classname}}</div>
  </div>
</template>

<script>
import { getNavFun } from '@/network/innerAxios'
export default {
  data () {
    return {
      listLeftArr: [],
      idActive: '47'
    }
  },
  mounted () {
    this.getLeftData()
  },
  methods: {
    // 获取分类列表数据
    getLeftData () {
      getNavFun().then(res => {
        this.listLeftArr = res.data
      })
    },
    // 点击高亮分类
    clickActive (id) {
      this.idActive = id
      this.$emit('itemId', id)
    }
  }
}
</script>

<style lang="less" scoped>
.listLeft{
  background-color: #F8F8F8;
  height: 100%;
  .row{
    line-height: 1rem;
    padding-left: 0.2rem;
    font-size: 0.32rem;
    border-bottom: 1px solid #0e0d0d;
    color: #333;
    &.active{
      background-color: #fff;
      color: #31C27C;
    }
  }
}
</style>
